<template>
  <div
    class="navigation"
    id="slideshow"
  >
    <el-carousel
      :interval="3000"
      arrow="always"
      ref="banner"
      :height="height"
    >
      <el-carousel-item
        v-for="item in list"
        :key="item.bannerId"
      >
        <img
          :src="item.image"
          @click="getItem(item.url)"
        >
        <!-- <h3>{{ item.title }}</h3> -->
      </el-carousel-item>
    </el-carousel>
    <div
      class="company-content-bgColor"
      v-if="numId===1"
    >
      <div class="company-content">
        <div class="company-content-left">
          <div class="title">
            <p class="title-p">公司介绍 Company Introduction</p>
          </div>
          <div class="text">
            <p class="text-p">公司是经国家工商行政管局、人力和社会保障批准，于2013年8月9日成立，三汇拥有劳动派遣、教育投资、实习生(毕业生)专业对口安置三大心业务板块，业务涉及人才招聘、项目外包、航空、高铁、城轨、汽修、电子、电商、幼教安置与服务管理等，是一家大型综合性劳务派遣公司。 </p>
          </div>
        </div>
        <div class="company-content-right">
          <div class="item">
            <div class="icon">
              <img
                src="../assets/image/30分公司.png"
              />
            </div>
            <div class="first-text">
              <p class="first-text-p head">30+</p>
            </div>
            <div class="first-text">
              <p class="first-text-p">分公司</p>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img
                src="../assets/image/100合作商.png"
              />
            </div>
            <div class="first-text">
              <p class="first-text-p head">1000家</p>
            </div>
            <div class="first-text">
              <p class="first-text-p">合作商</p>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img
                src="../assets/image/500内部员工.png"
              />
            </div>
            <div class="first-text">
              <p class="first-text-p head">500+人</p>
            </div>
            <div class="first-text">
              <p class="first-text-p">内部工人</p>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img
                src="../assets/image/10万派遣员工.png"
              />
            </div>
            <div class="first-text">
              <p class="first-text-p head">50万+人</p>
            </div>
            <div class="first-text">
              <p class="first-text-p">派遣员工</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    numId: {
      type: Number,
      default: 0
    }

  },
  data() {
    return {
      list: [],
      height: ''
    }
  },
  mounted() {
    if (window.screen.width > 800) {
      this.height="400px"
    }else{
      this.height="200px"
    }
    this.getBanner(this.numId);
  },
  methods: {
    getItem(id) {
      if (id !== '') {
        window.open(id);
      }
    },
    getBanner(id) {
      this.axios({
        method: "post",
        url: "/web/api/banner",
        params: {
          category: id
        },
        headers: {
          Authorization: "application",
        }
      }).then(res => {
        this.list = res.data.data;
      });
    }
  },
  watch: {
    numId(n) {
      this.getBanner(n);
    }
  }
}
</script>

<style scoped lang="scss">
.el-carousel__container{
  height: 400px !important;
}
.navigation {
  width: 100%;
  .el-carousel{
    .el-carousel__container {   
      img{
        width:100%;
        height:100%;
        object-fit: cover;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.company-content-bgColor {
  width: 100%;
  height: 170px;
  background-color: #000;
  opacity: 0.8;
  float:left;
}
.company-content {
  width: 1200px;
  height: 170px;
  background-color: #000;
  opacity: 0.8;
  margin: 0 auto;
}
.company-content-left {
  width: 35%;
  height: 120px;
  margin-top: 25px;
  float: left;
}
.title {
  width: 100%;
  height: 20px;
}
.title-p {
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
.text {
  width: 520px;
  margin-top: 10px;
}
.text-p {
  font-size: 12px;
  line-height: 26px;
  color: #fff;
}
.company-content-right {
  width: 50%;

  height: 120px;
  margin-top: 25px;
  float: left;
  margin-left: 10%;
}
.item {
  width: 25%;
  height: 120px;
  float: left;
}
.icon {
  width: 50px;
  margin: 0 auto;
  height: 50px;
  border-radius: 50%;
  img{
    width:100%;
    height:auto;
  }
}
.first-text {
  width: 100%;
  height: 20px;
  margin-top: 10px;
}
.first-text-p {
  font-size: 10px;
  line-height: 20px;
  color: #e3e3e3;
  text-align: center;
}
.head {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 800px) {
  .navigation{
    width:100%;
    height:200px;
    margin-top:60px;
    .el-carousel__container{
      width:100%;
      height:200px;
      img{
        width:100%;
        height:200px;
      }
    }
    .company-content-bgColor{
      height:auto;
      overflow: hidden;
      box-sizing: border-box;
      padding:15px;
      .company-content{
        width:100%;
        .company-content-left{
          width:100%;
          margin-top:0;
          height:auto;
          overflow: hidden;
          .text{
            width:100%;
          }
        }
        .company-content-right{
          width:100%;
          margin-top:0;
          margin-left:0;
          margin-top:15px;
        }
      }
    }
  }
}
</style>

